<template> <!--  -->
  <div class="shop-box all-list-box" @touchstart="touchStart($event)" @touchend="touchEnd($event)">  
    <div class="filter-top" @click="showFilter = true"> 
      请选择筛选条件 <div class="isclick"></div> 
    </div>
    <!-- <div v-for="(item,index) in shopList" :key="index" class="shop-item">
        <div class="cityName">{{item.cityName}}</div>
        <div v-for="(shop,idx) in item.list" :key="idx" class="adrees" @click="chooseThis(index,idx)">
            <div class="shop-item-left">
                <div class="check-box">
                    <div class="check-circle" v-if="shop.isChecked"></div>
                </div>
            </div>
            <div class="shop-item-right">
                <div class="shop-name">{{shop.name}}</div>
                <div class="shop-adreess">{{shop.adreess}}</div>
            </div>
        </div>
    </div> -->
    <div v-for="(item,index) in shopList" :key="index" class="shop-item"> 
      <div class="adrees" @click="chooseThis(index)">
        <div class="shop-item-left">
            <div class="check-box">
                <div class="check-circle" v-if="item.isChecked"></div>
            </div>
        </div>
        <div class="shop-item-right">
            <div class="shop-name">{{item.storeName}}</div>
            <div class="shop-adreess">{{item.province}}{{item.city}}{{item.district}}{{item.adreess}}</div>
        </div>
      </div>
    </div>
    <nodata v-if="!shopList || shopList.length==0" />
    <!-- <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">    </infinite-loading> -->

    <div class="height120"></div>
    <div class="addbtn isbtn" @click="submit()">选好了</div>

    <!--  下拉筛选 -->
    <top-filter :showFilter.sync="showFilter">
      <div class="filter-content" @click.stop>
        <search v-model="searchText"
                position= "relative"
                placeholder="请输入名称"
                ref="search">
        </search>
        <div class="city-choose-name">城市</div>
        <div class="row-box">
          <group>
            <popup-picker v-model="city" show-name :data="cityList" placeholder="请选择城市"></popup-picker>
          </group> 
        </div>
        <div class="btn-box">
          <div class="reset btn" @click="reset">重置</div>
          <div class="confirm btn" @click="confirmSelect">确认</div>
        </div>
      </div>
    </top-filter>
    <!-- 下拉筛选end -->
  </div>
</template>

<script>
import row from '@/components/row'
import topFilter from '@/components/topFilter'
import api from '@/api/api.js' 
import { Message } from 'element-ui' 
import { Group, PopupPicker,XDialog,Search } from 'vux'
import InfiniteLoading from 'vue-infinite-loading';
import nodata from '@/components/nodata'
export default { 
  components: {
    row,
    topFilter,
    Search,
    XDialog,
    Group, 
    PopupPicker,
    InfiniteLoading,
    nodata
  },
  data () {
    return {
      shopFilter:{
        pageNum:1,
        pageSize:20,
        name:'',
        city:'',
        totalPage:0,
      }, 
      totalPage:'',
      showFilter:false,
      cityList:[ JSON.parse(sessionStorage.cityList || '[]')],
      searchText:'',
      city:[],
      shopList:[ ],
      multiplay:true,
      formType:'',
    }
  },
  created(){
    this.getCity();
    if(this.$route.query.formType==2){//  采购订单进入
      this.formType = this.$route.query.formType;
      this.multiplay=false;
    }
  },
  mounted () {
    this.getShopList();
  },
  filters: {
  },
  
  methods: {
    onInfinite() {
      // if(this.totalPage>this.pageNum){
      //   this.pageNum++;
      //   this.getShopList();
      // }
    } ,
    getCity(){ 
      api.publick.cityList({},res=>{
        let cityArr = res.result.map(item=>{
          return {name: item.city,value:item.city}
        })
        this.cityList = [cityArr]; 
      })
    },
    //重置筛选
    reset(){
      this.searchText = '';
      this.city=[];
    },
    filterShow(){
      this.showFilter = !this.showFilter
    },
    confirmSelect(){
      this.shopFilter.name = this.searchText;  
      this.shopFilter.pageNum = 1;
      this.shopFilter.city = this.city[0] ? this.city[0] : '';
      this.getShopList();
      this.showFilter = false;
    },  
    chooseThis(index1,index2){
      if(this.multiplay){ //多选
        const bool = !this.shopList[index1].isChecked;
        this.$set(this.shopList[index1], "isChecked", bool);
      }else{ //单选
        if(this.shopList[index1].isChecked){
          return
        }
        // if(this.formType==2 && this.this.shopList[index1].replWarehouse){
        //   return Message({
        //         message: "该店铺含有仓库,请选择其他店铺",
        //         type: 'error',
        //         duration: 3 * 1000
        //     }) 
        // }
        this.shopList.forEach((item,index)=>{
          if(item.isChecked){
             this.$set(this.shopList[index], "isChecked", false);
          }
        })
        this.$set(this.shopList[index1], "isChecked", true);
      }
      
    },
    submit(){
      let checkShop =  [];
      this.shopList.forEach(item => {
        if(item.isChecked){
          checkShop.push(item);
        } 
      })
      if(checkShop.length==0){
        return  Message({
                message: "请选择店铺！",
                type: 'error',
                duration: 3 * 1000
            }) 
      }
      
      if(this.formType==2){ //采购订单进入
        this.$store.commit("setPurchaseOrderDetail",{
          tab_idx:1,
          detail:checkShop[0]
        })
        this.$store.commit("setCheckGoods",[]); 
        this.$router.go(-1);
        return ; 
      }
      this.$store.commit("setShopList",checkShop);
      this.$router.go(-1);
    },
    getShopList(){
      let params={
        pageNum: this.shopFilter.pageNum,
        pageSize: this.shopFilter.pageSize
      }
      if(this.searchText){
        params.name=this.searchText;
      }
       if(this.shopFilter.name){
        params.name = this.shopFilter.name;
      }
       if(this.shopFilter.city){
        params.city = this.shopFilter.city;
      }
      this.isLoading = true;
      if(this.formType==2){
        params.queryType = 2;
      }
      api.shopMng.shopList(params,res=>{
        this.isLoading = false;
        this.shopList= this.shopFilter.pageNum == 1 ? res.result.data :this.shopList.concat(res.result.data);
        this.shopFilter.totalPage = res.result.totalPage;
      })
    },
    touchStart(e) {
        this.startY = e.targetTouches[0].pageY;
        this.startX = e.targetTouches[0].pageX;  
    },
    scrollToEnd(e) {
        let scrollHeight = this.$el.scrollHeight; 
        let clientHeight = this.$el.clientHeight; 
        let scrollTop = this.$el.scrollTop;  
        if (scrollTop + clientHeight >= scrollHeight -60) { //下拉到底了
          this.doLoadMore()  
        } 
    },
    touchEnd(e) {
      if (this.isLoading) {
          return;
      }
      let endX = e.changedTouches[0].pageX,
          endY = e.changedTouches[0].pageY,
          dy = this.startY - endY,
          dx = endX - this.startX;
      if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
          return;
      }
      if (endY < this.startY) {
          this.scrollToEnd(e)
      }
    },
    doLoadMore() { 
      if(this.shopFilter.pageNum < this.shopFilter.totalPage){
        ++this.shopFilter.pageNum;
        this.getShopList()
      }
      return 
    }, 
  }
}
</script>
<style lang="less" scoped>
    .height120{
        height: 60px;
    }
    .addbtn{
        text-align: center;
        line-height: 50px;
        background: #FABE00;
        color: #fff;
        height: 50px;
        font-size: 16px;
        letter-spacing: 4px;
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
    }
    .shop-box{
        padding-top: 50px;
    }
    .cityName{
        font-size: 16px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
        padding-left: 16px;
        margin-top: 10px;
    }
    .adrees{ 
        padding-left: 20px;
        position: relative;
        font-size: .24rem;
        line-height: .24rem;
        padding-top: .20rem;
        padding-bottom: .20rem;
        color: #666;
        display: flex;
        &::before{
            content: '';
            position: absolute;
            right: 0;
            left: 20px;
            bottom: 0;
            height: 1px;
            background: #eee;
        }
        .shop-item-left{
            padding: 0 .24rem;
            display: flex;
            justify-content: center;
            align-items: center;
            .check-box{
                display: flex;
                justify-content: center;
                align-items: center;
                width: .38rem;
                height: .38rem;
                border-radius: 50%;
                border: 1px solid #e1e1e1;
                .check-circle{
                    width: .18rem;
                    height: .18rem;
                    border-radius: 50%;
                    background: #FABE00;
                }
            }
        }
    }
    .city-choose-name{
        margin-top: 15px;
    }
    .filter-top{
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        border-bottom: 1px solid #eee;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 3;
        .isclick{
            border-width: 0 1px 1px 0;
            margin-top: -6px;
        }
    }
    .btn-box{
        display: flex;
        width: 100%;
        margin-top: 20px;
        height: 44px;
        justify-content: space-between; 
    .btn{
        border-radius: 8px;
        height: 44px;
        width: 45%;
        line-height: 44px;
        text-align: center;
        color: #fff;
        &:active{
        opacity: .7;
        }
        &.reset{
        background: #ddd;
        }
        &.confirm{
        background: #FABE00;
        }
    }
}
.search-box{
    width: 90%;
}
.iconshaixuan{
    color: #999;
    margin-left: 6px;
    font-size: 18px;
}
/deep/.weui-search-bar__label{
  top: 3px;
}
.filter-content{
  background: #fff;
  width: 100%;
  padding: 20px;
  /deep/.weui-search-bar:before{
    height: 0;
  }
  /deep/.weui-search-bar::after{
    height: 0;
  }
  .row-box{
    margin-bottom: 20px;
  }
  .filter-title{
    padding-top: 20px;

  }
  .data-time-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
/deep/.vux-popup-picker-select{
  text-align: left !important;
}
/deep/.weui-search-bar,.vux-search-fixed{
  position: relative !important;
  padding: 0;
  background: #fff;
}
/deep/.weui-search-bar__cancel-btn{
  text-decoration: none;
}
/deep/.weui-search-bar:after{
  display: none;
}
/deep/.weui-search-bar::before{
  display: none;
}
.shop-adreess{
    margin-top: 0.20rem;
    color: #999;
}
</style>